//
// GLOBALS
//

// Alpine js

[x-cloak] { display: none; }

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

//
// LAYOUT
//


// Colour

.text{
    &-green{
        color: $green-light;
    }
    &-green-darkest{
        color: $green-darkest;
    }
    &-green-button {
        color: $green-button;
    }
    &-green-dark {
        color: $green-dark;
    }
    &-green-darker {
        color: $green-button;
    }
}
.bg{
    &-light-green{
        background-color: $green-light;
    }
    &-light-pastel-green {
        background-color: #B4F3C9;
    }
    &-pastel-green{
        background-color: $green-pastel;
    }
    &-green-dark{
        background-color: $green-dark;
    }
    &-green-darkest{
        background-color: $green-darkest;
    }
    &-button-green {
        background-color: $green-button;
    }
    &-green-transparent {
        &::before{
            content:'';
            position: absolute;
            left:0;
            right:0;
            height: 100%;
            width: 100%;
            background-color: $green-dark;
        }
    }
}

.co-logo {
    object-fit: cover;
    width: 100%;
    height: 250px;
}

.border {
    &-green {
        border-color: $green-button;
    }
}
// Blocks of content
.content-block {
    padding: 20px 0;
}

.table-of-contents {
    min-height: 300px;
    font-family: 'Prodigy';

    ul {
        list-style: none;
        margin: 10px 0 0 0;
        padding: 0;
        // Opacity on hover effect
        &:hover > li {
            transition: 150ms all ease;
            opacity: 0.3;
        }
    }

    // Focus on hover effect
    ul li:hover {
        opacity: 1;
    }

    a {
        display: block;
        color: inherit;
        text-decoration: none;
        font-weight: 400;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    ul {
        li {
            ul {
                padding-left: 20px;
            }
        }
    }
}

// Reponsive 2 column layout block
.col-2 {
    margin: 10px 0;
    display: grid;
    gap: $spacer-xxl;
    grid-template-columns: 1fr 1fr;

    @include media-query($on-palm) {
        grid-template-columns: 1fr;
        gap: $spacer-xxl;
    }
}

.nogap {
    @include media-query($on-palm) {
        gap: 0;
    }
}

// Section with wide background + color
.breakout {
    position: relative;
    background: $breakout-bg-color;
    margin: $spacer-xl 0;
    padding: 80px 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.max-width {
    align-items: center;
    flex-grow: 1;
}

//
// STYLING
//

h1,.h1, h2,.h2, h5,.h5 {
    font-family: $header-font-family;
    font-weight: normal;
}

// Type size ramp
h1, .h1 {
    font-weight: $title-font-weight;
    font-size: $title-font-size;
    letter-spacing: $title-letter-spacing;
    line-height: 1;
    font-family: $header-font-family;

    @include media-query($on-mobile) {
        font-size: $title-font-size-mobile;
    }

    @include media-query($on-mobile-old) {
        font-size: $title-font-size-mobile-old;
    }
}

h2, .h2 {
    font-size: $header2-font-size;
    line-height: 1;
    letter-spacing: -0.01em;
}

h3, .h3 {
    font-size: $header3-font-size;
    line-height: 1.3;
    letter-spacing: 0;
    font-family: $header-font-family-medium;
    font-weight: 500;
}

h4, .h4 {
    line-height: 1.3;
    font-size: $header4-font-size;
    letter-spacing: 0;
    font-family: $header-font-family-semibold;
    font-weight: 600;
}

h5, .h5 {
    line-height: 1;
    font-size: $header5-font-size;
}

.header-small {
    font-size: $base-small-size;
    font-family: $header-font-family;
}

// Make the first paragraph of a page have bigger font.
// To opt out, make sure the first element is not a `<p>` tag.
.content > p:first-child {
    font-size: $subtitle-font-size;
}

.markdown {
    h2 {
        color: $green-darkest;
        margin-bottom: 32px;
        margin-top: 60px;
    }
    h3, h4 {
        margin-bottom: 30px;
        color: $green-darkest;
    }
    p {
        color: $green-darkest;
    }
    table {
        margin-bottom: 28px;
        width: 100%;
        text-align: left;
        color: $green-darkest;
        border-collapse: collapse;
        border: 1px solid #CECECE;
        border-radius: 20px;
        th {
            background-color: $green-lightest;
        }
    }
    blockquote {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px;

        /* Green - Lightest */
        border: none;
        background: $green-lightest;
        border-radius: $radius;
        margin-bottom: 30px;
        letter-spacing: normal;
        font-style: normal;
        & > p{
            margin:0;
            color: #155757;
        }
    }
    a {
        color: $green-darkest;
        text-decoration:underline;
        font-weight: normal;
    }
}

details {
    // Simulate a 1px border with same behavior as "border-collapse: collapse".
    border: 1px solid $grey-light;
    border-radius: $radius;
    display: block;
    padding: ($spacer-xl / 3) ($spacer-xl / 2);
    margin-bottom: 1rem;
    &[open] > summary {
      margin-bottom: $spacer-l;
    }
    summary {
        list-style: none;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-left: 30px;
        cursor: pointer;
        font-weight: 600;
        color: $green-darkest;
    }
    summary::-webkit-details-marker {
        display: none;
    }

    summary::after {
        content: ' ►';
        position: absolute;
        top: 0;
        left: 0;
        color: $green-darkest;
    }
    &[open] > summary:after {
        content: " ▼";
    }
    > summary > span {
      margin-left: 30px;
    }

    &:last-child {
        margin-bottom: 40px;
    }
}


// Spacing elements
.m-b-0 {
    margin: 0px;
}

.m-b-l {
    margin-bottom: $spacer-xl;
}

.m-b-xl {
    margin-bottom: 100px;
}

.m-t-s {
    margin-top: $spacer-m;
}

.m-t-m {
    margin-top: $spacer-l;
}

.m-t-l {
    margin-top: $spacer-xl;
}

.m-t-xl {
    margin-top: $spacer-xxl;
}

// Link styles for the 'button' look

.button-mono {
    font-family: $base-button-font;
    font-size: 16px;
    line-height: 1;
}

.cta-link {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    padding-left: 25px;
    color: #155757;
    font-family: $header-font-family-semibold;
    font-weight: 600;

    &::before {
        content:'';
        transition: all .25s ease-in-out;
        will-change: transform;
        position: absolute;
        left:0;
        top:auto;
        height: 14px;
        width: 14px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 13px;
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.697085 14.1509C-0.232361 9.52348 -0.232362 4.77828 0.697083 0.150878C5.54439 1.72628 10.0667 4.10277 14 7.15088C10.0667 10.199 5.54439 12.5755 0.697085 14.1509Z' fill='%2340DB88'/%3E%3C/svg%3E%0A");
    }

    &:hover {
        text-decoration: none;
        &::before {
            transform: translateX(3px);
        }
    }

    &.white {
        color: white;
    }

    &.center {
        justify-content: center;
        display: inline-block;
        &::before {
            content:'';
            position: absolute;
            left: 0;
            right: auto;
        }

    }
}

.select-dropdown {
  cursor: pointer;
  position: relative;
  font-family: "Prodigy";
  font-size: 80%;
  line-height: 1;
}

.main-content,
.markdown,
dl.as-table {
  p, ul, ol {
    margin: 0 0 2rem 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  li > p:last-child {
    margin-bottom: 2rem;
  }

  h2 {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }

  h3, h4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.main-content,
.markdown {
    ul:not(.custom-list),
    ol:not(.custom-list) {
        padding-left: 1.5rem;

        & > li {
            margin-bottom: 0.75rem;

            &:first-child {
                margin-top: 0.75rem;
            }
        }
    }

    ul:not(.custom-list) {
        list-style: disc;
        ul {
          list-style-type: circle;
          ul {
            list-style-type: square;
          }
        }
    }

    ol:not(.custom-list) {
        list-style: decimal;

        ol {
          list-style-type: lower-alpha;

          ol {
            list-style-type: lower-roman;
          }
        }
    }
}

.main-content {
    blockquote {
        margin: 0 0 2rem 0;

        & > p {
            margin: .75rem 0;
        }
    }
}

.important-messages {
  padding: 0 $spacer-l;
  position: sticky;
  top: $spacer-l;
  transition: top .25s ease-in-out;
  z-index: 2;

  .site-header.is-fixed + & {
    top: $header-height + $spacer-l;
  }

  .site-header.is-hidden + & {
    top: $spacer-l;
  }

  @include media-query-min($on-laptop) {
    top: $spacer-l !important;
  }

  #important-messages-checkbox:checked + & {
    display: none;
  }

  > div {
    background-color: $green-dark;
    border-radius: 5px;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: larger;
    margin: $spacer-l 0 0;
    padding: 0.5rem 2.5rem;
    pointer-events: auto;
    position: sticky;
    text-align: center;
    width: 100%;

    > label {
      cursor: pointer;
      display: block;
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      width: 1rem;
    }
  }
}

// When the banner is shown, add enough scroll-margin to all clickable links so
// that the clicked element is not occluded by the banner.
#important-messages-checkbox:not(:checked) ~ main *[id] {
  scroll-margin-top: 100px;
}

body {
    --scrollbar-width: 0px;
    --sidebar-width: 250px;

    @include media-query-min($on-laptop) {
        display: flex;
        flex-direction: row;
    }
}

.site-clamp {
    margin: 0 auto;
    max-width: $content-width;
    padding: 0 $spacer-l;
    width: 100%;
}

.site-header {
    height: $header-height;

    @include media-query-min($on-laptop) {
        display: none;
    }
}

// When a link is clicked, add enough scroll-padding to sure the header does not
// occlude it, and briefly highlight it with a different color.
html {
    scroll-padding-top: $header-height+$spacer-m;
    @include media-query-min($on-laptop) {
        scroll-padding-top: $spacer-m;
    }
}
.site-content :target {
  animation: briefHighlight 2s;
}
@keyframes briefHighlight {
  0% { background: $green-lighter; }
  100% { background: none; }
}

.site-header-inner {
    background: $green-dark;
    height: $header-height;
    padding: 0 $spacer-l;
    top: $header-height * -1;
    transition: transform .25s ease-in-out;
    width: 100%;
    z-index: 40;

    .is-fixed & {
        position: fixed;
    }

    .is-scrolled-past & {
        top: 0;
    }

    .is-hidden & {
        transform: translate3d(0, -100%, 0);
    }

    .menu-open & {
        position: fixed;
        top: 0;
        transform: none;
    }
}

.logo {
    .logo-white {
        position: static;
    }
}

.site-main {
    flex: 1 1 auto;
    max-width: 100%;

    @include media-query-min($on-laptop) {
        max-width: calc(100% - var(--sidebar-width));
    }
}

.site-footer {
    width: 100%;
}

.site-aside {
    background: $green-dark;
    color: $text-color-light;
    height: calc(100vh - #{$header-height});
    left: 0;
    max-width: var(--sidebar-width);
    position: fixed;
    top: $header-height;
    transform: translateX(-100%);
    transition: transform .25s ease-in-out;
    width: 100vw;
    z-index: 39;

    @include media-query-min($on-laptop) {
        height: 100vh;
        left: auto;
        max-width: none;
        position: sticky;
        top: 0;
        transform: none !important;
        transition: none;
        width: var(--sidebar-width);
        z-index: initial;
    }

    &.is-open {
      transform: translateX(0);
    }
}

.site-nav {
    // We want spacing between elements to *look* like line-height 1.7 but have
    // reduced spacing within an element so it looks like a single element.
    // To achieve this, we set line-height to 1.3 and add the remainder to the
    // padding top/bottom. That is:
    //    line-height 1.7 = line-height 1.3 + padding-top 0.2em + padding-bottom 0.2em
    // This is *almost* correct, except:
    // -  The baseline gets shifted up by one pixel, so we compensate by adding
    //    +1/-1 padding to the top/bottom.
    // -  The actual height is 0.02px smaller with the padding trick, which
    //    results in random elements shifting by a pixel.
    // (It is unclear why either of the above are true.)
    line-height: 1.3;
    font-family: "Prodigy";

    li li {
        padding-left: $spacer-l;
    }

    li > span {
        display: block;
        // For some reason, the simulated line-height 1.7 (see above) has a
        // baseline that is 1px higher than a real line-height 1.7. To fix this,
        // offset the line by one pixel via padding.
        padding: calc(0.2em + 1px) 8px calc(0.2em - 1px);
    }

    a[href] {
        color: $text-color-light;
        display: block;
        font-weight: $base-font-weight;
        // Add a little extra vertical padding to space elements out.
        padding: calc(0.2em + 1px + 2px) 8px calc(0.2em - 1px + 4px);
        text-decoration: none;

        &.is-active {
            background: $green-light;
            border-radius: 2px;
            color: $text-color;
        }
    }

    .section-title {
        color: $green-light
    }
}

.site-content {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: $spacer-l;

    @include media-query-min($on-tablet) {
        flex-direction: row-reverse;
    }
}

.table-of-contents {
    min-height: 0;
    flex: 1;
    width: 100%;

    > * {
        background: $background-color;
    }

    @include media-query-min($on-tablet) {
        flex: 0 0 var(--sidebar-width);
        max-height: 100vh;
        padding: $spacer-l 0;
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

.content-header {
    margin: $spacer-l 0 0;

    @include media-query-min($on-laptop) {
        margin-top: $spacer-l * 4;
    }
}

.content {
    flex: 1;
    margin: $spacer-l 0;
    min-width: 0; // needed to prevent `pre` elements from stretching container
    width: 100%;

    @include media-query-min($on-laptop) {
        margin: $spacer-l 0 ($spacer-l * 4);
    }

    .home-page & {
        margin: 0;
    }
}

.hero,
.section[class*="bg-"] {
    margin-left: calc(50% - 50vw + calc(var(--scrollbar-width) / 2));
    margin-right: calc(50% - 50vw + calc(var(--scrollbar-width) / 2));

    .has-toc & {
        @include media-query-min($on-tablet) {
            margin-left: calc(50% - 50vw + calc(#{$spacer-l} / 2) + calc(var(--sidebar-width) / 2) + calc(var(--scrollbar-width) / 2));
            margin-right: calc(50% - 50vw - calc(var(--sidebar-width) / 2) - calc(#{$spacer-l} / 2) + calc(var(--scrollbar-width) / 2));

            .wrapper {
                padding-right: calc(var(--sidebar-width) + calc(#{$spacer-l} * 2)) !important;
            }
        }

        @include media-query-min($on-laptop) {
            margin-left: calc(50% - 50vw + calc(#{$spacer-l} / 2) + calc(var(--sidebar-width)) + calc(var(--scrollbar-width) / 2));
            margin-right: calc(50% - 50vw - calc(#{$spacer-l} / 2) + calc(var(--scrollbar-width) / 2));
        }
    }

    @include media-query-min($on-laptop) {
        margin-left: calc(50% - 50vw + calc(var(--sidebar-width) / 2) + calc(var(--scrollbar-width) / 2));
        margin-right: calc(50% - 50vw + calc(var(--sidebar-width) / 2) + calc(var(--scrollbar-width) / 2));
    }

    > .wrapper {
        @extend .site-clamp;
    }

    &:not([class*="bg-white"]) > .wrapper {
        padding: 0 $spacer-l;
    }
}

// UTILS

.show-laptop {
    @include media-query($on-laptop) {
        display: none !important;
    }
}

.hide-laptop {
    @include media-query-min($on-laptop) {
        display: none !important;
    }
}
